<template>
    <div>
        <el-form label-width="120px">
            <el-form-item label="边长1：">
                <el-input-number v-model="side1" :min="1" :step="1" @change="refresh1"></el-input-number>
            </el-form-item>
            <el-form-item label="边长2：">
                <el-input-number v-model="side2" :min="1" :step="1" @change="refresh2"></el-input-number>
            </el-form-item>
        </el-form>
        <v-stage :config="configKonva">
            <v-layer>
                <v-rect :config="{
                      x: 20,
                      y: 50,
                      width: side1,
                      height: side1,
                      fill: 'red',
                    }"
                />

                <v-rect :config="{
                      x: 500,
                      y: 50,
                      width: side2,
                      height: side2,
                      fill: 'green',
                    }"
                />

            </v-layer>
        </v-stage>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                side1: 100,
                side2: 50,
                configKonva: {
                    width: 1000,
                    height: 200
                },
                configCircle: {
                    x: 100,
                    y: 100,
                    radius: 70,
                    fill: "red",
                    stroke: "black",
                    strokeWidth: 4
                }
            };
        },
        methods: {
            refresh1() {
                this.side2 = this.side1 / 2
                this.updateStage()
            },
            refresh2() {
                this.side1 = this.side2 * 2
                this.updateStage()
            },
            updateStage() {
                this.configKonva.height = this.side1 + 100
                this.configKonva.width = Math.max(1000, this.side1 * 2)
            }
        },
    };

</script>
